<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*小盒子在大盒子里面垂直居中*/
			
			/*第一种方法position*/
			/*.box1{width:200px;height:200px;background: red;position: absolute;left:150px;top:150px;}
			.boss{width:500px;height:500px;background: orange;position: relative;}*/
			
			/*第二种方法 position:absolute;margin:auto;
			/*.box1{width:200px;height:200px;background:red;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto auto;}
			.boss{width:500px;height:500px;background:orange;position :relative;}*/
			
			/*第三种方法margin
			.box1{width:200px;height:200px;background:red;margin:150px 150px;}
			.boss{width:500px;height:500px;background:orange;overflow: hidden;}*/
			
			/*第四种方法position:absolute margin;
			.box1{width:200px;height:200px;background:red;position: absolute;left:50%;top:50%;margin:-100px -100px;}
			.boss{width:500px;height:500px;background:orange;position: relative;}*/
			
			/*第五种方法padding
			.box1{width:200px;height:200px;background:red;}
			.boss{width:350px;height:350px;background:orange;padding:150px 150px;}*/
			
			
			
		</style>
	</head>
	<body>
		<div class="boss">
			<div class="box1"></div>
		</div>
	</body>
</html>
